<template>
    <rx-layout>
        <div slot="center">
            <a-form-model ref="form" :model="mdl" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-collapse v-model="activeKeys" class="aCollapse">
                    <a-collapse-panel key="1" :header="i18n('form.basicInformation','基本信息')" >
                        <a-row>
                            <a-col :span="12">
                                <a-form-model-item :label="i18n('form.viewName','视图名称')" prop="name">
                                    <a-input @blur.native="getPinyinByName" :placeholder="i18n('form.viewName','视图名称','input')" v-model="mdl.name"/>
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-model-item :label="i18n('form.markKey','标识键')" prop="key">
                                    <a-input :placeholder="i18n('form.alias','别名','input')" v-model="mdl.key"/>
                                </a-form-model-item>
                            </a-col>
                        </a-row>
                        <a-row>
                            <a-col :span="12">
                                <a-form-model-item :label="i18n('form.formSchemeEditing','表单方案(编辑)')" prop="formAlias">
                                    <rx-input-button class="input-button-edit" @click="selectSolution($event,true)" v-model="formSolution"></rx-input-button>
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-model-item :label="i18n('form.classify','分类')" prop="category">
                                    <rx-category-select v-if="isShowManageTree" :isAdmin="isManageToTree" cat-key="FORM" :isGrant="true" v-model="mdl.category"></rx-category-select>
                                </a-form-model-item>
                            </a-col>
                        </a-row>
                        <a-row>
                            <a-col :span="12">
                                <a-form-model-item :label="i18n('form.formSchemeDetailed','表单方案(明细)')" prop="formDetailAlias">
                                    <rx-input-button class="input-button-edit" @click="selectSolution($event,false)" v-model="formDetailSolution"></rx-input-button>
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-model-item :label="i18n('form.formSchemeIncreased','表单方案(新增)')" prop="formAddAlias">
                                    <rx-input-button class="input-button-edit" @click="selectSolution($event,false)" v-model="formAddSolution"></rx-input-button>
                                </a-form-model-item>
                            </a-col>
                        </a-row>
                    </a-collapse-panel>
                    <a-collapse-panel key="2" :header="i18n('form.basicStyle','基础风格')">
                        <a-row>
                            <a-col :span="8">
                                <a-form-model-item :label="i18n('form.formPopup','表单弹窗')" prop="isMax">
                                    <a-radio-group :placeholder="i18n('form.listSize','列表大小')" v-model="mdl.isMax">
                                        <a-radio value="YES">{{i18n('isListSizeMap.fullScreen','全屏')}}</a-radio>
                                        <a-radio value="NO">{{i18n('isListSizeMap.customSize','自定义大小')}}</a-radio>
                                    </a-radio-group>
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="8" v-show="mdl.isMax=='NO'">
                                <a-form-model-item :label="i18n('form.height','高度')" prop="height">
                                    <a-input-number  :placeholder="i18n('form.height','高度')" v-model="mdl.height" :min="100" :max="1500"/>
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="8" v-show="mdl.isMax=='NO'">
                                <a-form-model-item :label="i18n('form.width','宽度')" prop="width">
                                    <a-input-number  :placeholder="i18n('form.width','宽度')" v-model="mdl.width" :min="100" :max="1500"/>
                                </a-form-model-item>
                            </a-col>
                        </a-row>
                    </a-collapse-panel>
                    <a-collapse-panel key="3" :header="i18n('form.dataSource','数源来源')">
                        <a-row>
                            <a-col :span="12">
                                <a-col :span="12">
                                    <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.sqlBuildMethod','SQL构建方式')">
                                        <a-radio-group :placeholder="i18n('form.sqlBuildMethod','SQL构建方式')" v-model="mdl.useCondSql" default-value="freeMarker" >
                                            <a-radio value="freeMarker">SQL(FreeMarker)</a-radio>
                                            <a-radio value="groovy">SQL(Groovy)</a-radio>
                                        </a-radio-group>
                                    </a-form-item>
                                </a-col>
                            </a-col><a-col :span="12">
                                <a-form-model-item :label="i18n('form.dataSourceName','数据源名称')" prop="dbAlias">
                                    <rx-input-button style="width: 100%;" class="input-button-edit" @click="openDataSource" @change="cancelDataSource" v-model="dataSource"></rx-input-button>
                                </a-form-model-item>
                            </a-col>
                        </a-row>
                        <a-row>
                            <a-col :span="24">
                                <a-form-item :label="i18n('form.sqlStatement','SQL语句')" :labelCol="labelCol1" :wrapperCol="wrapperCol1">

                                    <rx-monaco-editor
                                        ref="sql"
                                        v-model="mdl.sql"
                                        language="sql"
                                        style="height:300px;"
                                    >
                                        <template v-slot:monacoeditor>
                                            <div>
                                                <a-dropdown>
                                                    <a-menu slot="overlay" @click="onSqlExp">
                                                        <a-menu-item key="{CREATE_BY_}">
                                                            {{i18n('form.currentUserID','当前用户ID')}}
                                                        </a-menu-item>
                                                        <a-menu-item key="{DEP_ID_}">
                                                            {{i18n('form.currentDepartmentID','当前部门ID')}}
                                                        </a-menu-item>
                                                        <a-menu-item key="{TENANT_ID_}">
                                                            {{i18n('form.currentOrganizationID','当前机构ID')}}
                                                        </a-menu-item>
                                                    </a-menu>
                                                    <a-button style="margin-right: 8px">{{i18n('isButton.insertForContext','插入上下文的SQL条件参数')}}
                                                        <a-icon type="down"/>
                                                    </a-button>
                                                </a-dropdown>
                                                <a-button style="margin-right: 8px" @click="insertExp('/*CONDITION*/')">
                                                    {{i18n('isButton.conditionalPlaceholder','条件占位符')}}
                                                </a-button>
                                                <a-button style="margin-right: 8px" @click="insertExp('/*ORDERBY*/')">
                                                    {{i18n('isButton.sortPlaceholder','排序占位符')}}
                                                </a-button>
                                            </div>
                                        </template>
                                    </rx-monaco-editor>
                                </a-form-item>

                            </a-col>
                        </a-row>
                    </a-collapse-panel>
                </a-collapse>
            </a-form-model>
        </div>
    </rx-layout>
</template>
<script>
import FormCalendarViewApi from '@/api/form/core/formCalendarView'
import {RxDialog, BaseFormModel, RxMonacoEditor, RxInputButton, Dialog,JsConstant} from "@lowcode/jpaas-common-lib";
import DialogBox from "@/assets/js/DialogBox";
import FormBoEntityApi from "@/api/form/bo/formBoEntity";
import FormCalendarViewEdit2 from './FormCalendarViewEdit2'
import AppName from "@/assets/js/AppName.js";
export default {
    name: 'FormCalendarViewEdit1',
    mixins: [BaseFormModel,AppName],
    components: {
        RxDialog,
        RxMonacoEditor,
        RxInputButton
    },
    data() {
        return {
            rules: {
                category: [{required: true, message: this.i18n('form.classify','分类','input'), trigger: 'change'}],
                key: [
                    {required: true, message: this.i18n('form.alias','别名','input'), trigger: 'change'},
                    {pattern:/^[a-zA-Z][a-zA-Z0-9_-]*$/,message:this.boentI18n('form.str','不能以数字开头,不能包含【_-】以外的特殊字符！','input')}
                ],
                name: [{required: true, message: this.i18n('form.viewName','视图名称','input'), trigger: 'change'}],
                sql: [{required: true, message: this.i18n('form.sqlStatement','SQL语句','input'), trigger: 'change'}],
            },
            activeKeys: ['1', '2','3'],
            formSolution:"",
            formDetailSolution:"",
            formAddSolution:"",
            dataSource:"",
        }

    },
    created() {
        this.isUserManager(this.$route.query.appId);
    },
    methods: {
        boentI18n(name,text,key){
            return this.$ti18(name,text,"formBoEntity",key);
        },
        i18n(name,text,key){
            return this.$ti18(name,text,"FormCalendarView",key);
        },
        onload_(values){
            if(values){
                if(values.formAlias){
                    this.formSolution=JSON.stringify({
                        value:values.formAlias,
                        text:values.formName,
                    })
                }
                if(values.formDetailAlias){
                    this.formDetailSolution=JSON.stringify({
                        value:values.formDetailAlias,
                        text:values.formDetailName,
                    })
                }
                if(values.formAddAlias){
                    this.formAddSolution=JSON.stringify({
                        value:values.formAddAlias,
                        text:values.formAddName,
                    })
                }
                if(values.dbAlias){
                    this.dataSource=JSON.stringify({
                        value:values.dbAlias,
                        text:values.dbName,
                    })
                }
            }else {
              this.mdl = Object.assign({
                  category:"",
                  key:"",
                  name:"",
                  sql:"",
                  isMax:"YES",
                  height: 350,
                  width: 650,
              });
            }
        },
        get(id) {
            return FormCalendarViewApi.get(id);
        },
        save(values) {
            let appId=this.curApp.appId;
            if(appId && !this.pkId){
                values.appId=appId;
            }
            if(!this.mdl.useCondSql){
                values.useCondSql="freeMarker";
            }
            if(this.formSolution){
                var formSolution_=JSON.parse(this.formSolution);
                values.formAlias=formSolution_.value;
                values.formName=formSolution_.text;
            }
            if(this.formDetailSolution){
                var formDetailSolution_=JSON.parse(this.formDetailSolution);
                values.formDetailAlias=formDetailSolution_.value;
                values.formDetailName=formDetailSolution_.text;
            }
            if(this.formAddSolution){
                var formAddSolution_=JSON.parse(this.formAddSolution);
                values.formAddAlias=formAddSolution_.value;
                values.formAddName=formAddSolution_.text;
            }
            if(this.dataSource){
                var dataSource_=JSON.parse(this.dataSource);
                values.dbAlias=dataSource_.value;
                values.dbName=dataSource_.text;
            }
            //将配置参数放入extJson
            this.setExtJson(values);
            this.mdl=values;
            return FormCalendarViewApi.save(values);
        },
        handleSubmit(self, this_,callback) {
            this_.$refs.form.validate(valid => {
                if (valid) {
                    this_.save(this_.mdl).then(res => {
                        if (res.success && res.code == 200) {
                            this_.mdl.ID_ = res.data.pkId;
                            self.id_ = res.data.pkId;
                            self.currentView = FormCalendarViewEdit2;
                            self.currentName = "edit2";
                            self.okText = self.i18n('isButton.saveAndPreview','保存&预览');
                        }
                    })
                }
            });
        },
        onSqlExp(e) {
            this.$refs.sql.insertContent("$" + e.key);
        },
        insertExp(text) {
            this.$refs.sql.insertContent(text);
        },
        getPinyinByName(){
            let name=this.mdl.name
            if (!name){
                return;
            }
            if (this.mdl.key){
                return;
            }
            this.getPinyin(name).then(res => {
                //去除不可见的特殊符号
                if(res){
                    res=res.replace(/\u200B/g,'');
                }
                this.$set(this.mdl,"key",res)
            })
        },
        selectSolution(vm,setSql) {
            var self=this;
            var config = {curVm: this, widthHeight: ['800px', '600px'], data: {multiSelect: false}};
            DialogBox.openSoution(config, function (data) {
                vm.setVal(data.alias, data.name);
                if(!self.mdl.name){
                    self.mdl.name=data.name
                }
                if(!self.mdl.key){
                    self.mdl.key=data.alias+"_calendar";
                }
                if(setSql && data.bodefId){
                    FormBoEntityApi.getMainExcludeAttrsByBoDefId(data.bodefId).then(res => {
                        if (res.data && !self.mdl.sql ) {
                            if (!self.mdl.useCondSqlType || self.mdl.useCondSqlType == 'freeMarker' ) {
                                var str = 'select * from ' + res.data.tableName;
                                self.$refs.sql.insertContent(str);
                            } else if (self.useCondSqlType == 'groovy') {
                                var str = 'String sql = "select * from ' + res.data.tableName + '";\n' +
                                    'return sql;';
                                self.$refs.sql.insertContent(str);
                            }
                        }
                    })
                }
            })
        },
        openDataSource(vm) {
            Dialog.openDataSourceDialog({
                curVm: this, widthHeight: ['1200px', '600px'],
                data: {appName: this.serviceName}
            }, function (self, data) {
                vm.setVal(data.alias, data.name);
            })
        },
        setExtJson(values){
            var extJson={};
            if(values.extJson){
                extJson= JSON.parse(values.extJson);
                extJson.formAlias=values.formAlias;
                extJson.formName=values.formName;
                extJson.formAddAlias=values.formAddAlias;
                extJson.formAddName=values.formAddName;
                extJson.formDetailAlias=values.formDetailAlias;
                extJson.formDetailName=values.formDetailName;
                extJson.isMax=values.isMax;
                extJson.height=values.height;
                extJson.width=values.width;
            }else {
                extJson={
                    formAlias:values.formAlias,
                    formName:values.formName,
                    formAddAlias:values.formAddAlias,
                    formAddName:values.formAddName,
                    formDetailAlias:values.formDetailAlias,
                    formDetailName:values.formDetailName,
                    isMax:values.isMax,
                    height:values.height,
                    width:values.width
                }
            }
            values.extJson=JSON.stringify(extJson);
        },
        //请空数据源
        cancelDataSource(val){
            if(!val){
                this.mdl.dbAlias="";
                this.mdl.dbName="";
            }
        }
    }
}
</script>
<style>
.relick a {
    margin-right: 10px;
}
.aCollapse .ant-collapse-content{
    overflow: initial!important;
}
</style>
